<template lang="html">
    <div class="footer">
        <nav>
           <li > <router-link to="/outpu"> 1</router-link> </li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
        </nav>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="css">
.footer{
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 45px;
  background: #f3f0f0;
}
nav{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
li{
  flex: 1;
  list-style: none;
  height: 100%;
line-height: 45px;
}
a{
  display: block;
  text-decoration: none;
}
.router-link-active {
  color: red;
  
}
</style>
